<template>
  <div style="position: relative;" :class="{'copyTop':classStyle}">
      <div
        :id="id"
        style="opacity: 0;position: absolute;left: -100px;">
        {{invateInput}}
      </div>
      <slot>
        <x-button
          type="primary"
          :mini="mini"
          ref="copy"
          @click.native="copy"
          :style="styleProp"
          :class="className"
          data-clipboard-action="copy"
          :data-clipboard-target="target"
        >{{butContent}}</x-button>
      </slot>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default{
  props:{
    invateInput:'',
    butContent:'',
    target:{
      default:'#copy_input'
    },
    mini:false,
    id:{
      default:'copy_input'
    },
    className:{
      default:'registerTab'
    },
    classStyle:{
      default:true
    },
    styleProp:{
      default:function () {
        return {'padding': '0 30px'}
      }
    }
  },
  data(){
      return {}
  },
  methods:{
    copy(){
      var that = this;
      let clipboard = new Clipboard('.'+that.className);
      clipboard.on('success',(res)=> {
        that.toastFn('复制成功','','success');
        clipboard.destroy();
        that.$emit('copySuccess')
      })
      clipboard.on('error', ()=>{
        that.toastFn('复制失败，请手动复制');
        clipboard.destroy()
      })
    }
  },
  mounted(){
    console.log(this.invateInput)
  }
}
</script>
<style>
  .copyTop{
    text-align: center;
    margin-top: 20px;
  }
</style>
